<template>
  <div>
    <div class="video_info">
      <a href="javascript:" :class="{on: cateType == 1}" @click="changeTab(1)">
        <i class="iconfont">&#xe908;</i>
        <p>目录</p>
      </a>
      <a v-if="false" href="javascript:" :class="{on: cateType == 2}" @click="changeTab(2)">
        <i class="iconfont">&#xe602;</i>
        <p>课件</p>
      </a>
    </div>
    <div :class="{show_panel: cateType}">
      <div class="cate_panel">
        <div v-if="cateType == 1">
          <dl v-for="(one, index) in courseInfo.chapterRespList" :key="index">
            <dt>第{{ index + 1 }}章：{{ one.chapterName }}</dt>
            <dd v-for="(two, num) in one.periodRespList" :key="num" :class="{on : playPeriod == two.id}" @click="playVideo(two)"><i class="iconfont">&#xe690;</i><span>第{{ num + 1 }}节：</span>{{ two.periodName }}
              <span v-if="two.resourceResp && two.resourceResp.videoStatus === 1" class="no_video2">(未更新)</span>
              <!--                <span v-if="two.isFree" class="c_blue">(免费)</span>-->
            </dd>
          </dl>
        </div>
        <div v-if="cateType == 2">
          <dl v-for="(one, index) in courseInfo.chapterRespList" :key="index">
            <dt>{{ one.chapterName }}</dt>
            <dd v-for="(two, num) in one.periodRespList" :key="num">
              <a href="javascript:" @click="downFile"><i class="iconfont">&#xe602;</i>{{ two.periodName }}
                <span v-if="tokenInfo && two.attachments != null && two.attachments.length > 2" class="attachments">
                  <attachment-popover :period-id="two.id" :attachments="two.attachments" />
                </span>
              </a>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import AttachmentPopover from '@/components/course/AttachmentPopover.vue'

export default {
  components: { AttachmentPopover },
  props: {
    courseInfo: {
      type: Object,
      default: null
    },
    playPeriod: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      cateType: 0,
      tokenInfo: this.$store.state.tokenInfo,
      userInfo: this.$store.state.userInfo
    }
  },
  mounted() {
  },
  methods: {
    changeTab(int) {
      if (int === this.cateType) {
        this.cateType = 0
      } else {
        this.cateType = int
      }
    },
    // 下载附件
    downFile(item) {
      // TODO
    },
    playVideo(data) {
      this.$emit('playfunc', data.id)
    }
  }
}
</script>
<style>
.attachments {
  float: right;
  text-decoration: underline;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
